import React from 'react'
import { Form, Upload, message, Button, Icon, Avatar, Card,Badge } from 'antd';
import QueueAnim from 'rc-queue-anim';
import Animate from 'rc-animate';
import Texty from 'rc-texty';
import TweenOne from 'rc-tween-one';
import PropTypes from 'prop-types';
import Autoset from './components/autoset'

export default class Test extends React.Component {

  render() {
    return (
      <>
        <style>
          {`
        .ant-avatar{
          margin-right: 5px !important;
        }`}
        </style>

        <Card title="基本，头像有三种选择" extra={<a href="#">More</a>}>
          <Avatar size={64} icon="user" />
          <Avatar size="large" icon="user" />
          <Avatar icon="user" />
          <Avatar size="small" icon="user" />
          <Avatar shape="square" size={64} icon="user" />
          <Avatar shape="square" size="large" icon="user" />
          <Avatar shape="square" icon="user" />
          <Avatar shape="square" size="small" icon="user" />
        </Card>

        <Card title="类型，支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色"
          extra={<a href="#">More</a>}
          style={{ marginTop: 10, }}
        >
          <Avatar icon="user" />
          <Avatar icon={<Icon type="user" />} />
          <Avatar>U</Avatar>
          <Avatar>USER</Avatar>
          <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
          <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
        </Card>

        <Card title="对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整"
          extra={<a href="#">More</a>}
          style={{ marginTop: 10, }}
        >
          <Autoset></Autoset>
        </Card>

        <Card title="带徽标的头像"
          extra={<a href="#">More</a>}
          style={{ marginTop: 10, }}
        >
          <span style={{ marginRight: 24 }}>
            <Badge count={1} >
              <Avatar shape="square" icon="user" />
            </Badge>
          </span>
          
          <span>
            <Badge dot>
              <Avatar shape="square" icon="user" />
            </Badge>
          </span>
        </Card>

      </>
    );
  }
};


// API#
// 参数	                 说明	类型	默认值	版本
// icon	                设置头像的图标类型，可设为 Icon 的 type 或 ReactNode	string | ReactNode	-	
// shape	              指定头像的形状	Enum{ 'circle', 'square' }	circle	
// size	                设置头像的大小	number | Enum{ 'large', 'small', 'default' }	default	
// src	                图片类头像的资源地址	string	-	
// srcSet	              设置图片类头像响应式资源地址	string	-	3.11.0
// alt	                图像无法显示时的替代文本	string	-	3.7.0k
// onError	            图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为	() => boolean	-	3.8.0
